<!-- 表格组件 -->
<script lang="tsx" setup>
import { onMounted, ref, toRaw } from "vue";

import type { TableColumnOption } from "@/components/table-widget/table-widget.vue";
import TableWidget from "@/components/table-widget/table-widget.vue";
import { whManagerBsTbParkGridGetParkGridStatic, whManagerBsTbRiskHazardsControlDeleteByIdIdUsingPost, whManagerBsTbRiskHazardsHandleYearMonthStatistic } from "@/genapi/wh";
import bus from "vue3-eventbus";

import { injectState } from "../state";

defineOptions({ name: "Sheet" });

let value1 = ref([
	// {
	// 	area: "园区A网格",
	// 	num: "12",
	// },
	// {
	// 	area: "园区A网格",
	// 	num: "11",
	// },
	// {
	// 	area: "园区A网格",
	// 	num: "9",
	// },
	// {
	// 	area: "园区A网格",
	// 	num: "31",
	// },
	// {
	// 	area: "园区A网格",
	// 	num: "21",
	// },
]);

let value2 = ref([
	// {
	// 	month: "2024.01",
	// 	num: "12",
	// },
	// {
	// 	month: "2024.02",
	// 	num: "11",
	// },
	// {
	// 	month: "2024.03",
	// 	num: "9",
	// },
	// {
	// 	month: "2024.04",
	// 	num: "31",
	// },
	// {
	// 	month: "2024.05",
	// 	num: "21",
	// },
]);

const columns1: TableColumnOption<(typeof value1.value)[0]>[] = [
	{
		label: "序号",
		type: "index",
		fixed: "left",
		width: 80,
	},
	{
		label: "网格区域",
		formatter: (row) => row.area ?? "-",
	},
	{
		label: "风险管控数量",
		formatter: (row) => row.num ?? "-",
	},
];

const columns2: TableColumnOption<(typeof value2.value)[0]>[] = [
	{
		label: "序号",
		type: "index",
		fixed: "left",
		width: 80,
	},
	{
		label: "月份",
		formatter: (row) => row.month ?? "-",
	},
	{
		label: "隐患数量",
		formatter: (row) => row.num ?? "-",
	},
];
let year = ref('2024')
bus.on('getyear',(val) => {
    year.value = val
    getAllData()
  })

let tableRef1 = ref(null);
let tableRef2 = ref(null);
const getAllData = async() => {
  let res1 = await whManagerBsTbRiskHazardsHandleYearMonthStatistic({year:year.value})
  console.log('隐患排查趋势表',res1)
  value2.value = res1.data.map((item) => {
    return {
      month:year.value+'-'+item.text,
      num:item.count
    }
  })
  // whManagerBsTbParkGridGetParkGridStatic
  let res2 = await whManagerBsTbParkGridGetParkGridStatic()
  value1.value = res2.data?.map((item) => {
    return {
		area: item.gridName,
		num: item.num,
	}
  })
}
onMounted(() => {
  getAllData()
})
</script>

<template>
	<div class="sheetContainer">
		<div class="chartBox" style="padding-right: 100px">
			<div class="chartTitle">
				风险分布图
				<el-button @click="tableRef1?.exportTable('文件')">
					<template #icon>
						<el-icon class="i-material-symbols:file-save-outline-rounded" />
					</template>
					导出
				</el-button>
			</div>
			<div class="chartContent" style="padding: 20px 0px 0px 0px">
				<!-- <el-table
					:data="value1"
					show-overflow-tooltip
					style="width: 100%; height: 100%"
					:border="true"
					size="large"
				>
					<el-table-column type="index" width="80" label="排名" />
					<el-table-column prop="area" label="网格区域" />
					<el-table-column prop="num" label="风险管控数量" width="160" />
				</el-table> -->
				<TableWidget
					size="large"
					ref="tableRef1"
					:data="value1"
					:columns="columns1"
					h="100%!"
				/>
			</div>
		</div>
		<div class="chartBox" style="padding-right: 100px">
			<div class="chartTitle">
				隐患排查趋势
				<el-button @click="tableRef2?.exportTable('文件')">
					<template #icon>
						<el-icon class="i-material-symbols:file-save-outline-rounded" />
					</template>
					导出
				</el-button>
			</div>
			<div class="chartContent" style="padding: 20px 0px 0px 0px">
				<!-- <el-table
					:data="value2"
					show-overflow-tooltip
					style="width: 100%; height: 100%"
					:border="true"
					size="large"
				>
					<el-table-column type="index" width="80" label="序号" />
					<el-table-column prop="month" label="月份" />
					<el-table-column prop="num" label="隐患数量" width="160" />
				</el-table> -->
				<TableWidget
					size="large"
					ref="tableRef2"
					:data="value2"
					:columns="columns2"
					h="100%!"
				/>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.sheetContainer {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.chartBox {
		width: 49%;
		height: 50%;
		display: flex;
		flex-direction: column;
		font-size: 22px;
		font-weight: 500;
		.chartTitle {
			height: 32px;
			display: flex;
			justify-content: space-between;
		}
		.chartContent {
			width: 100%;
			height: calc(100% - 32px);
			display: flex;
			align-items: center;
			font-weight: 500;
		}
	}
}
</style>
